<template>
	<div class="activeTimePicker">
		<div class="timePicker1">
			<h3>el-time-select(分别通过star、end和step指定可选的起始时间、结束时间和步长)</h3>
			<el-row :gutter="20">
				<el-col :span="10">
					<el-time-select v-model="value1" :picker-options="{start: '08:30',step: '00:15',end: '18:30'}" placeholder="选择时间">
					</el-time-select>
				</el-col>
			</el-row>
		</div>
		<div class="timePicker2">
			<h3>任意时间点(selectableRange限制时间范围，arrow-control控制操作方式)</h3>
			<el-row :gutter="20">
				<el-col :span="10">
					<span>鼠标滚轮操作</span>
					<el-time-picker v-model="times2" :picker-optins="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="任意时间点"></el-time-picker>
				</el-col>
				<el-col :span="10">
					<span>上下箭头操作</span>
					<el-time-picker v-model="times3" arrow-control :picker-optins="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="任意时间点"></el-time-picker>
				</el-col>
			</el-row>
		</div>
		<div class="timePicker3">
			<h3>固定时间范围</h3>
			<el-row :gutter="20">
				<el-col :span="24">
					<el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{start: '08:30',step: '00:15',end: '18:30'}">
					</el-time-select>
					<el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{start: '08:30',step: '00:15',end: '18:30',minTime: startTime}">
					</el-time-select>
				</el-col>
			</el-row>
		</div>
		<div class="timePicker3">
			<h3>任意时间范围(is-range属性即可选择时间范围，同样支持arrow-control属性。)</h3>
			<el-row :gutter="20">
				<el-col :span="24">
					<el-time-picker is-range v-model="value4" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
					</el-time-picker>
					<el-time-picker is-range arrow-control v-model="value5" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
					</el-time-picker>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				times1: '',
				times2: new Date(2016, 9, 10, 18, 40),
				times3: new Date(2016, 9, 10, 18, 40),
				startTime: '',
				endTime: '',
				value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
				value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
			}
		}
	}
</script>

<style>

</style>